<template>
  <div class="container">
    <!-- Header Section -->
    <div class="header">
      <div class="profile">
        <div style="margin-top: 40px">
          <img class="avatar" src="../../assets/homePage/26.png" alt="User Avatar">
        </div>
        <div class="profile-info">
          <p class="username" style="text-align: left">username</p>

            <div class="work-info">
              <div class="work-info1">
                <h3>5</h3>
                <div style="color: gray; font-size: 14px">出勤</div>
              </div>
              <div class="work-info1">
                <h3>0</h3>
                <div style="color: gray; font-size: 14px">迟到</div>
              </div>
              <div class="work-info1">
                <h3 style="color: red">0</h3>
                <div style="color: gray; font-size: 14px">缺勤</div>
              </div>
              <div class="work-info1">
                <h3>0</h3>
                <div style="color: gray; font-size: 14px">请假</div>
              </div>
            </div>


        </div>
      </div>
<!--      <div class="chart">-->
<!--        &lt;!&ndash; Radar Chart Placeholder &ndash;&gt;-->
<!--        <canvas id="radarChart"></canvas>-->
<!--      </div>-->
    </div>

    <!-- Stats Section -->
    <div class="stats">
      <div class="left">
       <div class="stat-card">
         <h3>数据表</h3>
       </div>
      </div>

      <div class="right">
        <div class="stat-card">
          <h3 style="text-align: left;margin-top: 5px">互动参与</h3>
          <div class="participation">
            <div class="participation1">
              <h1>0%</h1>
              <div>整体参与率</div>
            </div>
            <div class="participation1">
              <h1>0%</h1>
              <div>提问</div>
            </div>
            <div class="participation1">
              <h1>0%</h1>
              <div>抢答参与率</div>
            </div>
            <div class="participation1">
              <h1>0%</h1>
              <div>互动答题参与率</div>
            </div>
            <div class="participation1">
              <h1>0%</h1>
              <div>弹幕总数</div>
            </div>
          </div>
        </div>

        <div class="center">
         <div class="stat-card1">
           <h2 style="text-align: left;margin-top: 5px">测试</h2>
           <div class="participation">
             <div class="participation1" style="background-color:whitesmoke;border-radius: 5px">
               <h1>9/11</h1>
               <div>测试参与</div>
             </div>
             <div class="participation1"  style="background-color: whitesmoke;border-radius: 5px;color: red">
               <h1>57.6/100</h1>
               <div>测试平均分</div>
             </div>
           </div>
         </div>

         <div class="stat-card1">
           <h2 style="text-align: left;margin-top: 5px">作业</h2>
           <div class="participation">
             <div class="participation1" style="background-color:whitesmoke;border-radius: 5px">
               <h1>4/13</h1>
               <div>作业参与</div>
             </div>
             <div class="participation1"  style="background-color: whitesmoke;border-radius: 5px;color: cornflowerblue">
               <h1>21%</h1>
               <div>·作业平均重复率</div>
             </div>
           </div>
         </div>
       </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },

  mounted() {

  },
  methods: {

  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}

.header {
  //display: flex;
  width: 100%;
  margin-top: -10px;
  justify-content: space-between;
  margin-bottom: 5px;
}

.profile {
  display: flex;
  width: 94%;
  background-color: whitesmoke;
  padding: 15px;
  margin: 20px ;
  text-align: center;
  border-radius: 8px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
  align-items: center;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  font-size: 20px;
  font-weight: bold;
}

.work-info {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.work-info1{
  flex: 1;
}

.participation{
  display: flex;
  margin-bottom: 20px;
}

.participation1{
  flex: 1;
  margin: 10px;
  padding-bottom: 10px;
}

.stats {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.left{
  flex: 1;
}

.right{
  flex: 4;
}

.center{
  display: flex;
  width: 100%;
}

.stat-card1 {
  flex:5;
  border: #e3e1e1 1px solid;
  background-color: #ffffff;
  padding: 15px;
  margin: 20px ;
  text-align: center;
  border-radius: 8px;
}


.stat-card {
  border:#e3e1e1 1px solid;
  background-color: #ffffff;
  padding: 15px;
  margin: 20px ;
  text-align: center;
  border-radius: 8px;
}


.tabs button {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

</style>

